<!--移动文件·-->
<template>
  <ele-modal
    v-if="visible"
    width="460px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="移动到"
    @update:visible="updateVisible"
  >
    <div class="title">
      <div class="title-font">{{name}}</div>
    </div>
    <el-radio-group v-model="moveFileId" class="flex-columns radio-height" @input="radioClick">
      <el-radio :label="i.id" class="radio-class" v-for="(i,j) in moveFileAll" :key="j">{{i.name}}</el-radio>
    </el-radio-group>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="moveSave">
        移动到此处
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import {updateFolder} from "@/api/creatCenter/material";

  export default {
    name: "move-file",
    props: {
      // 弹窗是否打开
      visible: Boolean,
       // 文件数据
      data: Array,
      // 可移动的文件夹
      moveFileAll: Array,
      name:String
    },
    data() {
      return {
        moveFileId: '',
        loading: false
      }
    },
    created(){
      console.log('新建剪辑dataList', this.dataList)
    },
    methods: {
      radioClick(e){
        console.log('e=======',e,this.data)
      },
      /* 更新 visible */
      updateVisible(value) {
          this.$emit('update:visible', value);
          // 清空文件夹id
          this.moveFileId = ''
      },
      // 移动到
      moveSave(){
        if(!this.moveFileId){
          this.$message.warning('请选择移动到的文件夹')
          return
        }
        const loading = this.$messageLoading('请求中..');
        updateFolder({
          ids: this.data,   // 文件ID数组
          folderId: this.moveFileId   // 移动到的文件ID
        })
          .then((msg) => {
            loading.close();
            this.updateVisible(false)
            this.$emit('done');
            this.$message.success(msg);
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e);
          });
      }
    }
  }
</script>

<style scoped>
/deep/ .el-dialog__footer{
  border: none;
}
/deep/ .el-dialog__body{
  padding: 0;
}
.title{
  margin: 0 20px;
  border-bottom: 1px solid var(--border-color-lighter);
}
.title-font{
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
  padding: 10px 0;
}
.radio-height{
  height: 250px;
}
.radio-class{
  padding-top: 30px;
  margin: 0 20px;
 }
</style>
